18 ஆகஸ்ட், 2025தமிழ்

ரியாக்ட் லேசி லோடிங் மற்றும் கோட் ஸ்ப்ளிட்டிங் மூலம் உங்கள் செயலியின் செயல்திறன், பயனர் அனுபவம், மற்றும் ஆரம்ப ஏற்றுதல் நேரங்களை வியத்தகு முறையில் மேம்படுத்துங்கள்.

ரியாக்ட் லேசி லோடிங்: காம்பொனென்ட் கோட் ஸ்ப்ளிட்டிங் மூலம் செயல்திறனை அதிகரித்தல்

இன்றைய வலை வடிவமைப்புச் சூழலில், செயல்திறன் மிக முக்கியமானது. பயனர்கள் வேகமான ஏற்றுதல் நேரங்களையும், மென்மையான செயல்பாடுகளையும் எதிர்பார்க்கிறார்கள். பெரிய ஜாவாஸ்கிரிப்ட் பண்டில்கள், குறிப்பாக சிக்கலான ரியாக்ட் செயலிகளில், ஆரம்ப ஏற்றுதல் நேரங்களையும், ஒட்டுமொத்த பயனர் அனுபவத்தையும் கணிசமாகப் பாதிக்கக்கூடும். இதைச் சமாளிப்பதற்கான ஒரு சக்திவாய்ந்த நுட்பம் லேசி லோடிங், குறிப்பாக காம்பொனென்ட் கோட் ஸ்ப்ளிட்டிங் ஆகும். இந்தக்கட்டுரை React.lazy மற்றும் Suspense ஆகியவற்றைப் பயன்படுத்தி ரியாக்ட் லேசி லோடிங்கைப் புரிந்துகொள்வதற்கும் செயல்படுத்துவதற்கும் ஒரு விரிவான வழிகாட்டியை வழங்குகிறது.

லேசி லோடிங் மற்றும் கோட் ஸ்ப்ளிட்டிங் என்றால் என்ன?

லேசி லோடிங், ஆன்-டிமாண்ட் லோடிங் என்றும் அழைக்கப்படுகிறது, இது ஆதாரங்கள் (இங்கே, ரியாக்ட் காம்பொனென்ட்கள்) தேவைப்படும் வரை அவற்றின் ஏற்றுதலைத் தாமதப்படுத்தும் ஒரு நுட்பமாகும். செயலியின் அனைத்து கோடையும் ஒரே நேரத்தில் ஏற்றுவதற்குப் பதிலாக, அத்தியாவசியமான பகுதிகள் மட்டுமே ஆரம்பத்தில் ஏற்றப்படுகின்றன, மீதமுள்ள கோட் பயனர் ஒரு குறிப்பிட்ட ரூட்டிற்குச் செல்லும்போது அல்லது ஒரு குறிப்பிட்ட காம்பொனென்டுடன் தொடர்பு கொள்ளும்போது ஒத்திசைவற்ற முறையில் ஏற்றப்படுகிறது. இது ஆரம்ப பண்டில் அளவைக் கணிசமாகக் குறைத்து, செயல்படத் தயாராகும் நேரத்தை (TTI) மேம்படுத்துகிறது.

கோட் ஸ்ப்ளிட்டிங் என்பது உங்கள் செயலியின் கோடை சிறிய, நிர்வகிக்கக்கூடிய துண்டுகளாக (பண்டில்கள்) பிரிக்கும் செயல்முறையாகும். இந்தப் பண்டில்களைத் தனித்தனியாகவும், தேவைக்கேற்பவும் ஏற்ற முடியும். ரியாக்ட் லேசி லோடிங், காம்பொனென்ட்கள் தேவைப்படும்போது மட்டுமே ஏற்றுவதற்கு கோட் ஸ்ப்ளிட்டிங்கைப் பயன்படுத்துகிறது.

லேசி லோடிங் மற்றும் கோட் ஸ்ப்ளிட்டிங்கின் நன்மைகள்

மேம்படுத்தப்பட்ட ஆரம்ப ஏற்றுதல் நேரம்: ஆரம்ப பண்டில் அளவைக் குறைப்பதன் மூலம், பிரவுசர் குறைவான ஜாவாஸ்கிரிப்டை ஆரம்பத்தில் பதிவிறக்கிப் பகுப்பாய்வு செய்கிறது, இதனால் பக்க ஏற்றுதல் நேரம் வேகமாகிறது. இது மெதுவான நெட்வொர்க் இணைப்புகள் அல்லது சாதனங்களில் உள்ள பயனர்களுக்கு மிகவும் முக்கியமானது.
மேம்பட்ட பயனர் அனுபவம்: வேகமான ஏற்றுதல் நேரங்கள் பதிலளிக்கக்கூடிய மற்றும் மகிழ்ச்சியான பயனர் அனுபவத்திற்கு வழிவகுக்கிறது, இது பவுன்ஸ் ரேட்களைக் குறைத்து பயனர் ஈடுபாட்டை அதிகரிக்கிறது.
குறைந்த வள நுகர்வு: தேவையான கோடை மட்டும் ஏற்றுவது செயலியின் நினைவகப் பயன்பாட்டைக் குறைக்கிறது, இது மொபைல் சாதனங்களுக்கு மிகவும் பயனுள்ளதாக இருக்கும்.
சிறந்த எஸ்சிஓ (SEO): தேடுபொறிகள் வேகமான ஏற்றுதல் நேரங்களைக் கொண்ட வலைத்தளங்களை விரும்புகின்றன, இது உங்கள் வலைத்தளத்தின் தேடுபொறி தரவரிசையை மேம்படுத்தக்கூடும்.

`React.lazy` மற்றும் `Suspense` மூலம் ரியாக்ட் லேசி லோடிங்கை செயல்படுத்துதல்

ரியாக்ட், React.lazy மற்றும் Suspense ஆகியவற்றைப் பயன்படுத்தி காம்பொனென்ட்களை லேசியாக ஏற்றுவதற்கு ஒரு உள்ளமைக்கப்பட்ட வழிமுறையை வழங்குகிறது. React.lazy ஒரு காம்பொனென்டை டைனமிக்காக இம்போர்ட் செய்ய உங்களை அனுமதிக்கிறது, அதேசமயம் Suspense காம்பொனென்ட் ஏற்றப்படும்போது ஒரு ஃபால்பேக் UI-ஐக் காட்ட ஒரு வழியை வழங்குகிறது.

படி 1: `React.lazy` உடன் டைனமிக் இம்போர்ட்ஸ்

React.lazy ஒரு செயல்பாட்டை (function) எடுத்துக்கொள்கிறது, அது import()ஐ அழைக்கிறது. import() செயல்பாடு ஒரு டைனமிக் இம்போர்ட் ஆகும், இது ஒரு ப்ராமிஸை (Promise) வழங்கும், அந்த ப்ராமிஸ் நீங்கள் லேசியாக ஏற்ற விரும்பும் காம்பொனென்டைக் கொண்ட ஒரு மாட்யூலாக (module) தீர்க்கப்படும்.


import React, { lazy, Suspense } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

இந்த எடுத்துக்காட்டில், MyComponent ரெண்டர் செய்யப்படும் வரை ஏற்றப்படாது. import('./MyComponent') ஸ்டேட்மென்ட் ./MyComponent கோப்பிலிருந்து காம்பொனென்டை டைனமிக்காக இம்போர்ட் செய்கிறது. இந்த பாத் தற்போதைய கோப்பிற்கு சார்பானது என்பதை நினைவில் கொள்க.

படி 2: ஏற்றுதல் நிலைகளைக் கையாள `Suspense` ஐப் பயன்படுத்துதல்

லேசி லோடிங் என்பது காம்பொனென்ட்களை ஒத்திசைவற்ற முறையில் ஏற்றுவதை உள்ளடக்கியிருப்பதால், ஏற்றுதல் நிலையைக் கையாள்வதற்கும், காம்பொனென்ட் பெறப்படும்போது ஒரு ஃபால்பேக் UI-ஐக் காண்பிப்பதற்கும் ஒரு வழி தேவை. இங்குதான் Suspense உதவுகிறது. Suspense என்பது ஒரு ரியாக்ட் காம்பொனென்ட் ஆகும், இது அதன் சைல்டு காம்பொனென்ட்கள் தயாராகும் வரை ரெண்டரிங்கை "நிறுத்தி" வைக்க அனுமதிக்கிறது. இது ஒரு fallback ப்ராப்பை (prop) எடுத்துக்கொள்கிறது, இது சைல்டு காம்பொனென்ட்கள் ஏற்றப்படும்போது காண்பிக்க வேண்டிய UI-ஐக் குறிப்பிடுகிறது.


import React, { lazy, Suspense } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    Loading...

}>
      
    
  );
}

export default App;

இந்த எடுத்துக்காட்டில், Suspense காம்பொனென்ட் MyComponentஐச் சுற்றி உள்ளது. MyComponent ஏற்றப்படும்போது, fallback ப்ராப் (

Loading...

) ரெண்டர் செய்யப்படும். MyComponent ஏற்றப்பட்டவுடன், அது ஃபால்பேக் UI-ஐ மாற்றும்.

உதாரணம்: ஒரு ரியாக்ட் ரவுட்டர் செயலியில் ஒரு ரூட்டை லேசியாக ஏற்றுதல்

ஒரு ரியாக்ட் ரவுட்டர் செயலியில் உள்ள ரூட்களுக்கு லேசி லோடிங் மிகவும் பயனுள்ளதாக இருக்கும். உங்கள் செயலியின் முழுப் பக்கங்களையும் அல்லது பிரிவுகளையும் லேசியாக ஏற்றலாம், இது உங்கள் வலைத்தளத்தின் ஆரம்ப ஏற்றுதல் நேரத்தை மேம்படுத்துகிறது.


import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));

function App() {
  return (
    
      Loading...

import React, { lazy, Suspense } from 'react'; class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // Update state so the next render will show the fallback UI. return { hasError: true }; } componentDidCatch(error, errorInfo) { // You can also log the error to an error reporting service console.error(error, errorInfo); } render() { if (this.state.hasError) { // You can render any custom fallback UI return Something went wrong.; } return this.props.children; } } const MyComponent = lazy(() => import('./MyComponent')); function App() { return ( Loading...}> ); } export default App;

பல்வேறு தொழில்களில் உதாரணங்கள்

ரியாக்ட் லேசி லோடிங் மற்றும் கோட் ஸ்ப்ளிட்டிங்கின் நன்மைகள் பல்வேறு தொழில்களிலும் பரவியுள்ளன. இதோ சில உதாரணங்கள்:

இ-காமர்ஸ் (E-commerce): எண்ணற்ற தயாரிப்புப் பக்கங்கள் மற்றும் விரிவான தயாரிப்புத் தகவல்களைக் கொண்ட இ-காமர்ஸ் வலைத்தளங்கள், படங்கள் மற்றும் தயாரிப்பு விவரங்களை லேசியாக ஏற்றுவதன் மூலம் கணிசமாகப் பயனடையலாம். மாற்று விகிதங்களுக்கு ஆரம்ப பக்க ஏற்றுதல் நேரங்கள் முக்கியமானவை; பயனர்கள் மெதுவாக ஏற்றும் பக்கத்தை விட்டு வெளியேற வாய்ப்புள்ளது. பெரிய பட கொணர்விகள் மற்றும் விரிவான தயாரிப்பு விவரக்குறிப்புகள் லேசி லோடிங்கிற்கு சிறந்த தேர்வுகளாகும்.

சமூக ஊடகங்கள்: சமூக ஊடகத் தளங்கள் பெரும்பாலும் எண்ணற்ற படங்கள் மற்றும் வீடியோக்களுடன் முடிவில்லாத ஸ்க்ரோலிங் ஊட்டங்களைக் கொண்டுள்ளன. லேசி லோடிங் திரையில் தெரியும் உள்ளடக்கத்தை மட்டும் ஏற்றுவதை உறுதிசெய்கிறது, இது ஸ்க்ரோலிங் செயல்திறனை மேம்படுத்துகிறது மற்றும் டேட்டா நுகர்வைக் குறைக்கிறது. பயனர் சுயவிவரங்களையும் தனிப்பட்ட இடுகைகளையும் தேவைக்கேற்ப ஏற்றுவதும் உதவுகிறது.

செய்தி வலைத்தளங்கள்: அதிக அளவு கட்டுரைகள் மற்றும் மல்டிமீடியா உள்ளடக்கத்தைக் கொண்ட செய்தி வலைத்தளங்கள், தலைப்புச் செய்திகள் மற்றும் சுருக்கங்களின் ஆரம்பக் காட்சிக்கு முன்னுரிமை அளிக்க லேசி லோடிங்கைப் பயன்படுத்தலாம். முழு கட்டுரைகளையும் உட்பொதிக்கப்பட்ட மீடியாவையும் தேவைக்கேற்ப ஏற்றுவது உலாவல் அனுபவத்தை மேம்படுத்துகிறது, குறிப்பாக மொபைல் சாதனங்களில் உள்ள பயனர்களுக்கு.

டாஷ்போர்டுகள் மற்றும் டேட்டா விஷுவலைசேஷன் கருவிகள்: விளக்கப்படங்கள், வரைபடங்கள் மற்றும் அட்டவணைகளைக் கொண்ட சிக்கலான டாஷ்போர்டுகள், டேட்டா மற்றும் விஷுவலைசேஷன்கள் தெரியும் போது அல்லது கோரப்படும்போது ஏற்றுவதற்கு லேசி லோடிங்கைப் பயன்படுத்தலாம். இது டாஷ்போர்டின் பதிலளிப்புத் தன்மையை மேம்படுத்துகிறது மற்றும் பயனர்கள் டேட்டாவுடன் விரைவாகத் தொடர்பு கொள்ள அனுமதிக்கிறது.

ஆன்லைன் கல்வித் தளங்கள்: பெரிய பாட நூலகங்கள் மற்றும் மல்டிமீடியா பாடங்களைக் கொண்ட தளங்கள், மாணவர்கள் பாட உள்ளடக்கம், வீடியோக்கள் மற்றும் ஊடாடும் பயிற்சிகளை அணுகும்போது மட்டுமே அவற்றை ஏற்றுவதற்கு லேசி லோடிங்கைப் பயன்படுத்தலாம். இது ஆரம்ப ஏற்றுதல் நேரங்களைக் குறைக்கிறது மற்றும் ஒட்டுமொத்த கற்றல் அனுபவத்தை மேம்படுத்துகிறது. ஊடாடும் சிமுலேஷன்கள் மற்றும் மதிப்பீடுகள் லேசி லோடிங்கிற்கு சிறந்த தேர்வுகளாகும்.

React.lazy மற்றும் Suspense ஐத் தாண்டி

React.lazy மற்றும் Suspense ஆகியவை லேசி லோடிங்கைச் செயல்படுத்த ஒரு நேரடியான வழியை வழங்கினாலும், மற்ற லைப்ரரிகளும் நுட்பங்களும் மேலும் மேம்பட்ட அம்சங்களையும் கட்டுப்பாட்டையும் வழங்க முடியும்:

loadable-components மற்றும் @loadable/component: இந்த லைப்ரரிகள் சர்வர்-சைட் ரெண்டரிங், முன் ஏற்றுதல் மற்றும் பெயரிடப்பட்ட எக்ஸ்போர்ட்களுக்கான ஆதரவு உட்பட கோட் ஸ்ப்ளிட்டிங்கிற்கான மேலும் மேம்பட்ட அம்சங்களை வழங்குகின்றன. அவை ஏற்றுதல் செயல்முறையின் மீது நுணுக்கமான கட்டுப்பாட்டை வழங்குகின்றன மற்றும் சிக்கலான செயலிகளுக்குப் பயனுள்ளதாக இருக்கும்.

வெப்பக்கின் டைனமிக் இம்போர்ட்ஸ்: வெப்பக்கின் டைனமிக் இம்போர்ட்ஸ் கோட் ஸ்ப்ளிட்டிங்கிற்கான ஒரு கீழ்-நிலை வழிமுறையை வழங்குகிறது, இது ரியாக்டின் லேசி லோடிங் அம்சங்களுடன் இணைந்து பயன்படுத்தப்படலாம்.

முடிவுரை

காம்பொனென்ட் கோட் ஸ்ப்ளிட்டிங்குடன் கூடிய ரியாக்ட் லேசி லோடிங் என்பது உங்கள் ரியாக்ட் செயலிகளின் செயல்திறனை மேம்படுத்துவதற்கான ஒரு சக்திவாய்ந்த நுட்பமாகும். தேவைக்கேற்ப காம்பொனென்ட்களை ஏற்றுவதன் மூலம், நீங்கள் ஆரம்ப ஏற்றுதல் நேரங்களைக் கணிசமாகக் குறைக்கலாம், பயனர் அனுபவத்தை மேம்படுத்தலாம் மற்றும் வள நுகர்வைக் குறைக்கலாம். React.lazy மற்றும் Suspense ஐப் பயன்படுத்துவதன் மூலம், உங்கள் ரியாக்ட் ப்ராஜெக்ட்களில் லேசி லோடிங்கை எளிதாகச் செயல்படுத்தலாம் மற்றும் வேகமான, பதிலளிக்கக்கூடிய வலைச் செயலிகளை உருவாக்கலாம். தடையற்ற பயனர் அனுபவத்தை உறுதிசெய்ய, பிழை கையாளுதல், ஏற்றுதல் குறிகாட்டிகள் மற்றும் பிற மேம்பட்ட நுட்பங்களைக் கருத்தில் கொள்ள மறக்காதீர்கள். உகந்த முடிவுகளை அடைய உங்கள் செயலியின் செயல்திறனைத் தொடர்ந்து கண்காணித்து, உங்கள் கோட் ஸ்ப்ளிட்டிங் உத்தியைச் செம்மைப்படுத்துங்கள்.

லேசி லோடிங்கின் சக்தியைத் தழுவி, வேகமான, திறமையான மற்றும் பயனர் நட்புடன் கூடிய வலைச் செயலிக்கான திறனைத் திறந்திடுங்கள்.

ரியாக்ட் லேசி லோடிங்: காம்பொனென்ட் கோட் ஸ்ப்ளிட்டிங் மூலம் செயல்திறனை அதிகரித்தல்

லேசி லோடிங் மற்றும் கோட் ஸ்ப்ளிட்டிங் என்றால் என்ன?

லேசி லோடிங் மற்றும் கோட் ஸ்ப்ளிட்டிங்கின் நன்மைகள்

`React.lazy` மற்றும் `Suspense` மூலம் ரியாக்ட் லேசி லோடிங்கை செயல்படுத்துதல்

படி 1: `React.lazy` உடன் டைனமிக் இம்போர்ட்ஸ்

படி 2: ஏற்றுதல் நிலைகளைக் கையாள `Suspense` ஐப் பயன்படுத்துதல்

உதாரணம்: ஒரு ரியாக்ட் ரவுட்டர் செயலியில் ஒரு ரூட்டை லேசியாக ஏற்றுதல்

மேம்பட்ட நுட்பங்கள் மற்றும் கருத்தாய்வுகள்

பிழை எல்லைகள் (Error Boundaries)

Something went wrong.

லேசி லோடிங்கிற்கான சிறந்த நடைமுறைகள்

பல்வேறு தொழில்களில் உதாரணங்கள்

`React.lazy` மற்றும் `Suspense` ஐத் தாண்டி

முடிவுரை

ரியாக்ட் லேசி லோடிங்: காம்பொனென்ட் கோட் ஸ்ப்ளிட்டிங் மூலம் செயல்திறனை அதிகரித்தல்

லேசி லோடிங் மற்றும் கோட் ஸ்ப்ளிட்டிங் என்றால் என்ன?

லேசி லோடிங் மற்றும் கோட் ஸ்ப்ளிட்டிங்கின் நன்மைகள்

React.lazy மற்றும் Suspense மூலம் ரியாக்ட் லேசி லோடிங்கை செயல்படுத்துதல்

படி 1: React.lazy உடன் டைனமிக் இம்போர்ட்ஸ்

படி 2: ஏற்றுதல் நிலைகளைக் கையாள Suspense ஐப் பயன்படுத்துதல்

உதாரணம்: ஒரு ரியாக்ட் ரவுட்டர் செயலியில் ஒரு ரூட்டை லேசியாக ஏற்றுதல்

மேம்பட்ட நுட்பங்கள் மற்றும் கருத்தாய்வுகள்

பிழை எல்லைகள் (Error Boundaries)

Something went wrong.

லேசி லோடிங்கிற்கான சிறந்த நடைமுறைகள்

பல்வேறு தொழில்களில் உதாரணங்கள்

React.lazy மற்றும் Suspense ஐத் தாண்டி

முடிவுரை

`React.lazy` மற்றும் `Suspense` மூலம் ரியாக்ட் லேசி லோடிங்கை செயல்படுத்துதல்

படி 1: `React.lazy` உடன் டைனமிக் இம்போர்ட்ஸ்

படி 2: ஏற்றுதல் நிலைகளைக் கையாள `Suspense` ஐப் பயன்படுத்துதல்

`React.lazy` மற்றும் `Suspense` ஐத் தாண்டி